<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap4.5.min.css">
    <title>互联网模板</title>
    <style>
        li {
            list-style: none;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        .row {
            margin: 0;
        }
        
        @media (min-width:576px) {
            .container {
                max-width: 576px;
                padding: 0;
            }
        }
        
        @media (min-width:768px) {
            .container {
                max-width: 768px;
                padding: 0;
            }
        }
        
        @media (min-width:992px) {
            .container {
                max-width: 992px;
                padding: 0;
            }
        }
        
        @media (min-width:1200px) {
            .container {
                max-width: 1200px;
                padding: 0;
            }
        }
        
        .data {
            width: 100%;
            background: url('img/data/beijin1.jpg');
        }
        
        .data_list_fl h2 {
            margin-top: 10vw;
            color: #fff;
            font-size: 48px;
        }
        
        .data_list_fl span {
            display: inline-block;
            margin: 30px 0 45px 0;
        }
        
        .data_list_fl p {
            margin-top: 45px;
            font-size: 18px;
        }
        
        .data_list_fl a {
            display: block;
            width: 225px;
            height: 45px;
            background-color: #fff;
            border-radius: 45px;
            line-height: 45px;
            text-align: center;
            text-decoration: none;
            margin-top: 100px;
            margin-bottom: 50px;
        }
        
        .data_list_fr ul {
            margin-top: 8vw;
            display: flex;
            flex-wrap: wrap;
        }
        
        .data_list_fr ul li:nth-child(even) {
            margin-left: 20px;
        }
        
        .data_list_fr ul li {
            margin-bottom: 20px;
        }
        
        .data_list_fr_box {
            padding: 50px 33px;
            background-color: #fff;
        }
        
        .data_list_fr_content p {
            margin-top: 10px;
            font-size: 14px;
            color: #999999;
        }
        
        .data_list_fr_content h6 {
            margin-top: 24px;
        }
        
        @media(max-width:1200px) {
            .data_list_fr ul li {
                width: 48%;
            }
        }
        
        @media(max-width:768px) {
            .data_list_fr ul li {
                width: 100%;
            }
            .data_list_fr ul li:nth-child(even) {
                margin-left: 0;
            }
        }
    </style>
</head>

<body>
    <div class="data">
        <div class="container">
            <div class="data_list row">
                <div class="col-lg-5 col-md-12 col-12 data_list_fl">
                    <h2>数据<br><span>是一切分析的前提</span> </h2>
                    <img src="img/data/img1.webp" alt="">
                    <p>提供多种数据源的实时采集与建模，开放全端 API 实现数据打通，让数据成为企业核心资产。</p>
                    <a href="#">了解更多</a>
                </div>
                <div class="col-lg-7 col-md-12 col-12 data_list_fr">
                    <ul>
                        <li class="data_list_fr_box">
                            <div class="data_list_fr_content">
                                <img src="img/data/img2.png" alt="">
                                <h6>基础数据采集与建模</h6>
                                <p>请输 全面采集前端、后端和产生的所有数<br> 据，为企业建立完整数据仓库。</p>
                            </div>
                        </li>
                        <li class="data_list_fr_box">
                            <div class="data_list_fr_content">
                                <img src="img/data/img3.png" alt="">
                                <h6>基础数据采集与建模</h6>
                                <p>请输 全面采集前端、后端和产生的所有数<br> 据，为企业建立完整数据仓库。</p>
                            </div>
                        </li>
                        <li class="data_list_fr_box">
                            <div class="data_list_fr_content">
                                <img src="img/data/img4.png" alt="">
                                <h6>基础数据采集与建模</h6>
                                <p>请输 全面采集前端、后端和产生的所有数<br> 据，为企业建立完整数据仓库。</p>
                            </div>
                        </li>
                        <li class="data_list_fr_box">
                            <div class="data_list_fr_content">
                                <img src="img/data/img5.png" alt="">
                                <h6>基础数据采集与建模</h6>
                                <p>请输 全面采集前端、后端和产生的所有数<br> 据，为企业建立完整数据仓库。</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>